<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期</title>
	</head>
	<body>
		<div id="app">
			<p>{{message}}</p>
			<button type="button" @click="change()">点击改变</button>
			<button type="button" @click="destroy()">点击销毁</button>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					message: "Welcome Vue"
				},
				methods: {
					change() {
						this.message = 'Datura is me';
					},
					destroy() {
						vm.$destroy();
					}
				},
				beforeCreate: function() {
					console.group('beforeCreate 创建前状态===============》');
					console.log('beforeCreate')
				},
				created: function() {
					console.group('created 创建完毕状态===============》');
					console.log(this.message)
				},
				beforeMount: function() {
					console.group('beforeMount 挂载前状态===============》');
					console.log('beforeMount')
				},
				mounted: function() {
					console.group('mounted 挂载结束状态===============》');
					console.log(this.message)
				},
				beforeUpdate: function() {
					console.group('beforeUpdate 更新前状态===============》');
					console.log('beforeUpdate')
				},
				updated: function() {
					console.group('updated 更新完成状态===============》');
					console.log(this.message)
				},
				beforeDestroy: function() {
					console.group('beforeDestroy 销毁前状态===============》');
					console.log('beforeDestroy ')
				},
				destroyed: function() {
					console.group('destroyed 销毁完成状态===============》');
					console.log(this.message)
				}
			})
		</script>

	</body>
</html>
